<template>
	<view class="content">
		<view class="list" v-if="list.length">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="time">
					{{item.updateTime}}
				</view>
				<view class="sbox">
					<view class="line">
						订单编号：<text>{{item.orderId}}</text>
					</view>
					<view class="line">
						会员类型：<text>{{item.vipType}}</text>
					</view>
					<view class="line">
						佣金金额：<text>{{item.commission}}元</text>
					</view>
				</view>
			</view> 
			<u-loadmore class="loadmore" :status="status" v-if="pageNum > 1" />
		</view>
		<view class="null" v-else>
			<u-empty text="暂无内容" icon="/static/e.png" marginTop="100" ></u-empty>
		</view> 
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[],
				pageNum:1,
				status: 'loadmore', 
				allData: false,
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if (this.allData) {
				this.status = 'loading'
				this.pageNum++
				this.getList();
			}
		},
		methods:{
			getList(){
				this.$http({
					url:"/umsVaultDetail/orderQuery",
					method:"get",
					data:{
						memberId:'',
						type:1,
						pageSize:10, 
						pageNum:this.pageNum
					}
				}).then(data=>{
					if (this.pageNum == 1) {
						this.list = data.list
					} else {
						this.list.push(...data.list) 
					}  
					if (data.totalPage > data.pageNum) {
						this.allData = true
						this.status = 'loading'
					} else {
						this.status = 'nomore' 
					    this.allData = false
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background: #f8f8f8;
	}
</style>

<style lang="scss" scoped>
	.content{
		padding: 30rpx;
		box-sizing: border-box;
		.list{
			.item{
				
				.time{
					font-size: 24rpx;
					color: #333333;
					margin-bottom: 30rpx;
					margin-top: 30rpx;
				}
				
				&:first-child{
					.time{
						margin-top: 0;
					}
				}
				.sbox{
					background: #fff;
					padding: 30rpx;
					.line{
						font-size: 24rpx;
						color: #999999;
						margin-bottom: 24rpx;
						&:last-child{
							margin-bottom: 0;
						}
						text{
							color: #333;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
</style>